<template>
  <div class="tool-container">
    <a-flex class="tool w-100" :justify="'space-between'" :align="'center'">
      <a-flex :gap="4">
        <a-button type="link" :disabled="!selectedFile" @click="openFile()">打开</a-button>
        <a-dropdown trigger="click">
          <a-button :disabled="!currentPath" type="link">
            新建
            <DownOutlined class="text-8" />
          </a-button>
          <template #overlay>
            <a-menu :items="parentMenus"></a-menu>
          </template>
        </a-dropdown>
        <a-button @click="loadPath()" type="link">
          <ReloadOutlined />
        </a-button>
      </a-flex>

      <a-flex :gap="4">
        <a-button type="link" :disabled="selectedFolders.length !== 1" @click="rename">
          重命名
        </a-button>

        <a-tooltip title="复制">
          <a-button type="link" @click="copyFile" :disabled="selectedFolders.length === 0">
            <CopyOutlined />
          </a-button>
        </a-tooltip>
        <a-tooltip title="粘贴">
          <a-button type="link" @click="pasteFile" :disabled="copiedPaths.length === 0">
            <SnippetsOutlined />
          </a-button>
        </a-tooltip>
        <a-popconfirm
          :disabled="selectedFolders.length === 0"
          title="确认删除这些文件（夹）吗"
          @confirm="delFile"
          placement="bottom"
        >
          <a-button type="link" :disabled="selectedFolders.length === 0">
            <DeleteOutlined />
          </a-button>
        </a-popconfirm>
        <a-tooltip title="卡片模式" v-if="mode === 'card'">
          <a-button type="link" @click="mode = 'table'">
            <OrderedListOutlined />
          </a-button>
        </a-tooltip>

        <a-tooltip title="表格模式" v-else>
          <a-button type="link" @click="mode = 'card'">
            <AppstoreAddOutlined />
          </a-button>
        </a-tooltip>
      </a-flex>
    </a-flex>
  </div>
</template>

<script setup lang="ts">
import { clonedFiles } from '@/api/modules/tool/file/file';
import { SnippetsOutlined } from '@ant-design/icons-vue';
import { useCloned, useEventBus } from '@vueuse/core';
import { message } from 'ant-design-vue';
import { delFile, loadPath, openFile } from '../../../data/action';
import { parentMenus } from '../../../data/contextmenu';
import { copiedPaths, currentPath, mode, selectedFile, selectedFolders } from '../../../data/data';
import { editFileName } from '../../../data/file.curd';
import { FOLDER_BUS } from '../data/config';

const bus = useEventBus(FOLDER_BUS);
const copyFile = () => {
  copiedPaths.value = useCloned(selectedFolders.value).cloned.value;
  message.success('已复制');
};
const rename = () => {
  editFileName();
};
const pasteFile = async () => {
  if (copiedPaths.value.length === 0) return;
  await clonedFiles(
    currentPath.value,
    copiedPaths.value.map(e => `${e}`),
  );
  await loadPath();
};
</script>

<style lang="scss" scoped>
.tool {
  border-bottom: 1px solid var(--border-color);
  font-size: 12px;
  height: 32px;
  padding: 0 8px;
}
.custom-button {
  border-radius: var(--radius);
  border: 1px solid var(--border-color) ddddd;
  padding: 0 8px;
  cursor: pointer;
  background: none;
}
input {
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  outline: none;
}
</style>
